<page-bar></page-bar>
<div nz-row nzGutter="12">
  <div nz-col nzMd="5">
    <!-- <nz-input-group [nzSuffix]="suffixIcon">
      <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
      <ng-template #suffixIcon>
        <i nz-icon nzType="search"></i>
      </ng-template>
    </nz-input-group> -->
    <nz-radio-group [(ngModel)]="treeType" style="width: 100%">
      <label style="width: 50%; text-align: center;" nz-radio-button nzValue="group">组织</label>
      <label style="width: 50%; text-align: center;" nz-radio-button nzValue="role">角色</label>
    </nz-radio-group>

    <div class="treeArea" style="margin-top: 8px; max-height: 600px; overflow: auto; border: 1px solid #ddd">
      <ng-template #iconTpl>
        <img style="width: 64px; height: 41px;" src="./assets/svg/nodata.svg">
      </ng-template>
      <nz-empty class="ant-empty-small" *ngIf="nodes.length === 0" [nzNotFoundImage]="iconTpl"></nz-empty>
      <nz-spin [nzSpinning]="loading">
        <ng-container *ngIf="treeType === 'group'">
          <nz-tree #deptTree [nzHideUnMatched]="true" [nzData]="nodes" [nzSearchValue]="searchValue"
            [nzDraggable]="false" [nzExpandAll]="true" (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"
            (nzSearchValueChange)="nzEvent($event)">
          </nz-tree>
        </ng-container>
        <ng-container *ngIf="treeType === 'role'">
          <cdk-virtual-scroll-viewport itemSize="73" style="height: 300px;">
            <nz-list>
              <nz-list-item *cdkVirtualFor="let item of ds" style="padding: 12px;">
                <nz-skeleton *ngIf="!item" [nzAvatar]="true" [nzParagraph]="{ rows: 1 }"></nz-skeleton>
                <nz-list-item-meta *ngIf="item" (click)="onVirualItemClick(item)" [nzTitle]="nzTitle"
                  [nzDescription]="item.roleDesc">
                  <ng-template #nzTitle>
                    {{ item.roleName }}
                    <nz-tag [nzColor]="'blue'">{{item.roleCode}}</nz-tag>
                  </ng-template>
                </nz-list-item-meta>
              </nz-list-item>
            </nz-list>
          </cdk-virtual-scroll-viewport>
        </ng-container>
      </nz-spin>
    </div>
  </div>

  <div nz-col nzMd="19">
    <div class="d-flex justify-content-between align-items-center mb-sm">
      <div class="d-flex align-items-center">
        <input nz-input [(ngModel)]="params.keyword" placeholder="搜索账号或名称" />
        <button nz-button nzType="primary" class="ml-md" (click)="st.load(1, params)">搜索</button>
        <button *ngIf="auth_btn_add" class="ml-md" nz-button nzType="default" type="button"
          (click)="openAddDiglog()">添加用户</button>
      </div>
      <div>
        <custom-column [st]="st" (ok)="st.resetColumns()"></custom-column>
      </div>
    </div>
    <div class="mt-sm mb-sm">
      角色筛选：
      <nz-tag [nzColor]="'blue'" nzMode="closeable" (nzOnClose)="onClose(t)" *ngFor="let t of tags2">{{t.roleName}}
      </nz-tag>
    </div>
    <st #st [widthMode]="{ type: 'strict' }" [ps]='20' [data]="url" [size]="'small'"
      [page]="{showSize: true, toTop: false}" [columns]="columns"
      [req]="{params: params, reName: { pi: 'current', ps: 'size' }}"
      [res]="{reName: { total: 'data.total', list: 'data.records'}}">
      <ng-template st-row="roles" let-item let-index="index">
        <role-view-group [roleList]="item.roleList"></role-view-group>
      </ng-template>
    </st>

  </div>
</div>
